<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="/js/vue.min.js"></script>
    <script language="JavaScript" src="/js/axios.min.js"></script>
</head>
<body>
<div id="BookDiv">
    <table border="1">
        <tr>
            <td>名称<input type="text"name="bookname" v-model="bookname"></td>
            <td>内容<input type="text" name="bookcontent" v-model="bookcontent"></td>
        </tr>
        <tr>
            <td>数量<input type="text" name="booknumber" v-model="booknumber"></td>
            <td>价格<input type="text"name="bookprice" v-model="bookprice"></td>
        </tr>
        <tr>
            <td>
                <button v-on:click="addbook">添加图书</button>
            </td>
        </tr>
      
    </table>
</div>
<script language="JavaScript">
    var vm = new Vue({
        el: "#BookDiv",
        data: {
            bookname:"",
            bookcontent:"",
            booknumber:"",
            bookprice:""
        },
        // created() {
        //     this.findbooklist();
        // },
        methods: {
            addbook: function () {
                var path = "http://localhost:8070/book/add"
                let formData = new FormData();
                formData.append("bookname",vm.bookname);
                formData.append("bookcontent",vm.bookcontent);
                formData.append("booknumber",vm.booknumber);
                formData.append("bookprice",vm.bookprice);
                axios.post(path,formData).then(function (obj) {

                    if (obj.status == 200) {
                        var pathResult = obj.data;
                            location.href="book_list.html";

                        return;
                    }
                }).catch(function (error) {
                    alert("有异常了")
                })
            }
        }
    });
</script>
</body>
</html>